<template>
  <div class="layout-good-price">
    <el-form ref="form" :model="brandProduct" label-width="100px" label-position="left" size="small">
      <el-form-item label="品牌" >
        <el-input v-model="brandProduct.brandName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="产品" >
        <el-input v-model="brandProduct.productName" :disabled="true"></el-input>
      </el-form-item>
            <el-form-item label="厂商" >
        <el-input v-model="brandProduct.partnerName" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <div class="scale-bar">
      <el-table :data="priceList" class="price-scale-table" border size="small">
        <el-table-column label="价格">
          <template slot-scope="scope">{{ scope.row.itemName }}</template>
        </el-table-column>
        <el-table-column label="联动方式">
          <template slot-scope="scope">
            <el-select v-model="scope.row" placeholder="联动方式" size="small">
              <el-option
                v-for="item in priceModeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="联动对象">
          <template slot-scope="scope">
            <el-select v-model="scope.row.obj" placeholder="联动对象" size="small">
              <el-option
                v-for="item in priceNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="联动系数">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.rate"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-table :data="list" v-loading="listLoading" class="good-price-table" size="small">
      <el-table-column label="规格" align="center">
        <el-table-column label="属性1">
          <template slot-scope="scope">{{scope.row.attr1}}</template>
        </el-table-column>
        <el-table-column label="属性2">
          <template slot-scope="scope">{{scope.row.attr2}}</template>
        </el-table-column>
        <el-table-column label="属性2">
          <template slot-scope="scope">{{scope.row.attr3}}</template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="价格" align="center">
        <el-table-column label="底价" width="140">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEdit"
              v-model="scope.row.price"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
            <span v-else>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格1" width="140">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEdit && !isAutoPrice"
              v-model="scope.row.price1"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
            <span v-else>{{ scope.row.price1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格2" width="140">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEdit && !isAutoPrice"
              v-model="scope.row.price2"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
            <span v-else>{{ scope.row.price2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格3" width="140">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEdit && !isAutoPrice"
              v-model="scope.row.price3"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
            <span v-else>{{ scope.row.price3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格4" width="140">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEdit && !isAutoPrice"
              v-model="scope.row.price4"
              :step="0.01"
              :controls="false"
              size="small"
              step-strictly
            ></el-input-number>
            <span v-else>{{ scope.row.price4 }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isEdit" size="mini" @click="handleSave(scope.row)">保存</el-button>
          <el-button v-else size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getBrandProductDetail} from '@/api/brandProduct';
import {getLookup} from '@/api/common';
export default {
  name: "Price",
  components: {},
  data() {
    return {
      priceList: [],
      list: [],
      listLoading: false,
      priceModeList: [],
      priceNameList: [],
      brandProduct:{
        brandName:'',
        brandCode:'',
        productCode:'',
        productName:'',
        partnerCode:'',
        partnerName:'',
        rules:[]
      }
    };
  },
  computed: {},
  created() {
      getBrandProductDetail(this.$route.query).then(response=>{
      this.brandProduct=response.data;
      })
,
      getLookup("Indentity").then(response=>{
      this.priceList=response.data;
      })
    this.priceModeList = [
      {
        label: "自定义",
        value: "1"
      },
      {
        label: "比率",
        value: "2"
      },
      {
        label: "固定值",
        value: "3"
      }
    ];

    this.priceNameList = [
      {
        label: "进货价",
        value: "1"
      },
      {
        label: "代理价",
        value: "2"
      }
    ];
    this.list.push({
      id: 1,
      attr1: "attr1",
      attr2: "attr2",
      attr3: "attr3",
      price: "",
      price1: "",
      price2: "",
      price3: "",
      price4: "",
      isEdit: false
    });
    this.list.push({
      id: 2,
      attr1: "attr111",
      attr2: "attr222",
      attr3: "attr333",
      price: "",
      price1: "",
      price2: "",
      price3: "",
      price4: "",
      isEdit: false
    });
    this.priceList.push({
      id: 1,
      priceName: "代理价",
      priceMode: "2",
      rate: 1.0,
      obj: "1"
    });
  },
  methods: {
    handleEdit(row) {
      row.isEdit = true;
    },
    handleSave(row) {
      row.isEdit = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout-good-price {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  .good-price-table {
    .el-input-number--small {
      width: 100%;
    }
  }
  .scale-bar {
    margin-bottom: 10px;
    .tips {
      line-height: 30px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 10px;
    }
  }
  .price-scale-table /deep/ {
    th.el-table__cell {
      background-color: #f5f7fa;
    }
    .el-input-number {
      width: 100%;
    }
  }
}
</style>